<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <father></father>
    </div>

   
    <template id="father">
        <div class="father">
            这是father! {{fatherMsg}} 
            <button @click='fatherMsg=123'>button</button>
            <son :parent-msg="fatherMsg"></son>
        </div>
    </template>
</body>


<script src="./base/vue.js"></script>
<script>
    //Vue.extend() //组件的类  Vue子类  所以组件可以拥有vue实例的绝大多数配置
    // 父组件给子组件传递数据的时候，
    //子组件需要利用props的属性来确定自己的预期数据
    //中间有-   需要写出驼峰的形式来接收
    //如果儿子没有通过props属性接受传递过来的数据，则数据会以自定义属性的方式
    //放在儿子最外层的根元素上面

    //组件之间的数据都是相互独立的。 数据只能在其自己管辖的范围内去使用。


    var json = {
        fatherMsg:"fatherMsg!!!!!!"
    }
    Vue.component("father",{
        template:"#father",
        components:{
            son:{
                props:["parentMsg"],//声明props来接受父组件传递来的属性
                template:"<div>我是son! {{parentMsg}}</div>"
            }
        },
        data(){  //组件内部数据必须写成一个函数，并且内部返回对象形式。
            return { //目的就是让每一个实例维护一份被返回对象的独立的拷贝。
                fatherMsg:"fatherMsg!!!!!!"
            }
        }
    })


    let vm = new Vue({
        el: '#app',
        data:{
            msg:"我是msg!"
        }
    })


 
</script>
</html>